<!--
 * @Author: gonghairun
 * @Date: 2020-11-19 10:16:14
 * @LastEditors: gonghairun
 * @LastEditTime: 2022-08-07 17:18:10
 * @Description: //柱状图
-->
<template>
	<div class="bar" :id="id"></div>
</template>

<script>
export default {
	components: {},
	props: {
		// 数据
		data: {
			type: Object,
		},
		// 点击事件
		chartHandleClick: {
			type: Function,
		},
		// 间距
		grid: {
			type: Object,
			default: () => {
				return {
					left: 50,
					top: 70,
					right: 30,
					bottom: 110,
				}
			},
		},
		// 图例
		legend: {
			type: Object,
			default: () => {
				return {
					show: true,
					itemWidth: 20,
					itemHeight: 12,
					top: 0,
					right: 0,
					textStyle: {
						color: "#333",
					},
					data: [],
				}
			},
		},
		// y轴配置
		yAxis: {
			type: Object,
			default: () => {
				return {
					isShow: true,
				}
			},
		},
		axisLabelShow: {
			type: Boolean,
			default: true,
		},
	},
	data() {
		return {
			id: "",
			seriesData: [],
		}
	},
	watch: {
		data: {
			immediate: true,
			deep: true,
			handler(value) {
				this.setBarOption()
			},
		},
	},
	computed: {},
	methods: {
		setBarOption() {
			let _this = this,
				legendList = []
			_this.seriesData = []
			_this.data.data.map(item => {
				legendList.push({
					name: item.name,
					itemStyle: {
						color: item.color,
					},
				})
				_this.seriesData.push({
					stack: item.stack,
					barGap: !item.barGap ? 0 : item.barGap,
					name: item.name,
					type: item.type,
					data: item.data,
					barWidth: item.width,
					yAxisIndex: item.yAxisIndex,
					zlevel: item.zlevel, //柱子层级
					symbol: item.symbol ? item.symbol : "circle",
					smooth: true,
					symbolSize: _this.data.xAxisData.length == 1 ? 6 : 0,
					// symbolSize: 0,
					itemStyle: {
						normal: {
							color: item.color,
						},
					},
					lineStyle: {
						normal: {
							color: item.color, // 线条颜色
							// width: item.width ? item.width : 2,
							width: 1.5,
							type: item.lineType ? item.lineType : "solid",
						},
						borderColor: "#f0f",
					},
					markLine: {
						width: 200,
						silent: true,
						lineStyle: item.markLine ? item.markLine.lineStyle : "",
						symbolSize: 0,
						label: item.markLine ? item.markLine.label : "",
						data: item.markLine ? item.markLine.data : 0,
					},
					areaStyle: {
						//区域填充样式
						normal: {
							//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
							color: new _this.$echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[
									{
										offset: 0,
										color: item.areaColor[0],
									},
									{
										offset: 1,
										color: item.areaColor[1],
									},
								],
								false
							),
							shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
							shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
						},
					},
					label: {
						normal: {
							show: item.labelIsShow,
							position: "top",
							fontFamily: "pingfang",
							marginTop: 15,
							color: "#000",
							fontWeight: "bold",
							fontSize: 16,
							// formatter: function (params) {
							// 	return _this.dataProcess(params.value, item.unit[0]).num
							// },
						},
					},
				})
				console.log(_this.seriesData)
			})
			// if (_this.legend.show) {
			// 	_this.$set(_this.legend, "data", legendList)
			// }
			let option = {
				tooltip: {
					trigger: "axis",
					confine: true,
					axisPointer: {
						type: "shadow",
					},
					backgroundColor: "#fff",
					textStyle: {
						color: "#333",
						fontSize: 16,
						align: "left",
						fontFamily: "pingfang",
					},
					// borderWidth:2,
					// borderColor:'#0f4985',
					label: {
						normal: {
							fontFamily: "pingfang",
						},
					},
					// extraCssText:
					//     "box-shadow:0px 6px 18px 0px rgba(11,25,40,0.96)"
					// formatter: function (params) {
					// 	let relVal = ""
					// 	relVal += params[0].name + "</br>"
					// 	for (var i = 0; i < params.length; i++) {
					// 		relVal +=
					// 			params[i].marker +
					// 			params[i].seriesName +
					// 			":" +
					// 			_this.dataProcess(params[i].value, _this.data.data[0].unit[0]).num +
					// 			_this.dataProcess(params[i].value, _this.data.data[0].unit[0]).unit +
					// 			"</br>"
					// 	}
					// 	return relVal
					// },
				},
				grid: _this.grid,
				legend: _this.legend,
				xAxis: [
					{
						type: "category",
						boundaryGap: true,
						axisLine: {
							//坐标轴轴线相关设置。数学上的x轴
							show: true,
							lineStyle: {
								color: "#DFE2E5",
							},
						},
						axisLabel: {
							//坐标轴刻度标签的相关设置
							textStyle: {
								color: "#fff",
								fontFamily: "pingfang",
								fontSize: 12,
								// margin: 15,
							},
							rotate: "45",
							// formatter:function(value){
							// if (!_this.rotate) {
							//     return value
							// } else {
							//     var ret = "";//拼接加\n返回的类目项
							//     var maxLength = 3;//每项显示文字个数
							//     var valLength = value.length;//X轴类目项的文字个数
							//     var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
							//     if (rowN > 1) {  //如果类目项的文字大于5,
							//         for (var i = 0; i < rowN; i++) {
							//             var temp = "";//每次截取的字符串
							//             var start = i * maxLength;//开始截取的位置
							//             var end = start + maxLength;//结束截取的位置
							//         //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
							//             temp = value.substring(start, end) + "\n";
							//             ret += temp; //凭借最终的字符串
							//         }
							//         return ret
							//     }else {
							//         return value
							//     }
							// }
							// }
						},
						axisTick: {
							show: false,
						},
						data: _this.data.xAxisData,
					},
				],
				yAxis: [
					{
						type: "value",
						nameTextStyle: {
							color: "#7F8FA4",
							fontSize: 12,
							align: "center",
							padding: [0, 30, 5, 0],
						},
						// show: _this.yAxis.isShow,
						splitLine: {
							show: false,
							lineStyle: {
								color: "#DFE2E5",
								type: "solid",
							},
						},
						axisLine: {
							//坐标轴轴线相关设置。数学上的x轴
							show: false,
							lineStyle: {
								color: "#7F8FA4",
							},
						},
						axisTick: {
							show: false,
							inside: true,
						},
						axisLabel: {
							show: _this.axisLabelShow,
							textStyle: {
								color: "#fff",
								fontFamily: "pingfang",
							},
							fontSize: 12,
							// formatter: function (value) {
							// 	value = _this.dataProcess(value, _this.data.data[0].unit[1]).num
							// 	return value
							// },
						},
					},
					{
						show: false,
						type: "value",
						name: "单位:万吨",
						nameTextStyle: {
							color: "#7F8FA4",
							fontSize: 12,
							align: "center",
							padding: [0, 20, 15, 0],
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: "#0a3256",
							},
						},
						axisLine: {
							//坐标轴轴线相关设置。数学上的x轴
							show: false,
							lineStyle: {
								color: "rgba(45,139,255,0.6)",
							},
						},
						axisTick: {
							show: false,
							inside: true,
						},
						axisLabel: {
							textStyle: {
								color: "rgba(255,255,255,1)",
								fontFamily: "pingfang",
							},
							fontSize: 16,
							// formatter: function (value) {
							// 	let unit = ""
							// 	_this.data.data.map(item => {
							// 		if (item.yAxisIndex == 1) {
							// 			unit = item.unit
							// 		}
							// 	})
							// 	value = unit == "set" ? value : _this.dataProcess(value, _this.data.data[0].unit[1]).num
							// 	return value
							// },
						},
					},
				],
				series: _this.seriesData,
			}
			_this.myChart.setOption(option)
			_this.myChart.on("click", function (params) {
				_this.chartHandleClick(params.name)
			})
		},
		genRandomString(len) {
			const text = "abcdefghijklmnopqrstuvwxyz0123456789"
			const rdmIndex = text => (Math.random() * text.length) | 0
			let rdmString = ""
			for (; rdmString.length < len; rdmString += text.charAt(rdmIndex(text)));
			return rdmString
		},
	},
	created() {
		this.id = this.genRandomString(20)
	},
	mounted() {
		const _this = this
		let echarts = _this.$echarts
		_this.$nextTick(() => {
			setTimeout(() => {
				_this.myChart = echarts.init(document.getElementById(this.id))
				_this.setBarOption()
				window.addEventListener("resize", () => {
					_this.myChart.resize()
					_this.setBarOption()
				})
			}, 200)
		})
	},
	activated() {
		const _this = this
		let echarts = _this.$echarts
		_this.$nextTick(() => {
			setTimeout(() => {
				_this.myChart = echarts.init(document.getElementById(this.id))
				_this.setBarOption()
				window.addEventListener("resize", () => {
					_this.myChart.resize()
				})
			}, 200)
		})
	},
}
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
